<template>
  <div>
    <input type="text" v-model="count" />
    <hr />
    <AwesomeInput v-model="awesome" />
    <!-- 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件 -->
    <AwesomeSwitch v-model="isMarried" />

    <ul>
      <ListItem
        @click.native="clickHandler(item)"
        v-for="item in arr"
        :key="item"
        :item="item"
      />
    </ul>
    <SyncTest :count="count" @update:count="count = $event" />
    <SyncTest :count.sync="count" />

    <hr />
    <SlotTest>最新文章</SlotTest>
    <SlotTest>最热文章</SlotTest>
    <hr />

    <XxTest :msg="msg" :obj="person" :c="count" y="yyy" :z="21" xxxx="123" />
    <hr />
    <RefTest ref="refTest" />
    <button @click="focusChild">focus 子组件的 input</button>

    <hr />
    <input ref="parentInput" class="parent-input" type="text" />
    <button @click="focus">focus input</button>
  </div>
</template>

<script>
import XxTest from "./components/XxTest.vue";
import AwesomeInput from "./components/AwesomeInput.vue";
import AwesomeSwitch from "./components/AwesomeSwitch.vue";
import ListItem from "./components/ListItem.vue";
import SyncTest from "./components/SyncTest.vue";
import SlotTest from "./components/SlotTest.vue";
import RefTest from "./components/RefTest.vue";

export default {
  components: {
    XxTest,
    AwesomeInput,
    AwesomeSwitch,
    ListItem,
    SyncTest,
    SlotTest,
    RefTest,
  },
  data: function () {
    return {
      msg: "hello",
      person: {
        name: "nick",
        age: 17,
      },
      count: 10,
      awesome: "100",
      isMarried: true,
      arr: [11, 22, 33],
    };
  },
  methods: {
    clickHandler: function (id) {
      console.log(id);
    },
    focus: function () {
      console.log(this.$refs.parentInput);
      this.$refs.parentInput.focus();
    },
    focusChild: function () {
      // console.log(this.$refs.refTest.content);
      console.log(this.$refs.refTest.$refs.input);
      this.$refs.refTest.$refs.input.focus();
    },
  },
};

// refs 主要用用在 表单 多媒体 等 dom对象的属性或者方法
</script>

<style>
</style>